<!--comment.vue-->
<template>
<div>
<mu-appbar title="评价">
  <mu-icon-button icon="arrow_back" slot="left" v-on:click="handleBack"/>
	<mu-icon-button id="id_send" icon="send" slot="right" @click="handleSend"/>
</mu-appbar>

<div id="id_profile">
<mu-card>
  <mu-card-header :title="$route.query.name" :subTitle="this.$route.query.mobile">
    <mu-avatar :src="IconAvatar" slot="avatar"/>
  </mu-card-header>
	</mu-card>
</div>

	<div id="id_comment">
		<mu-text-field hintText="您的评价将保持匿名,请放心评价(评价获得奖励)"
		fullWidth
		required
    v-model="comment"
		multiLine :rows="3"
		:rowsMax="6"/><br/>
	</div>
  <div>
  人品 <md-rating-bar v-model="rating6" :md-max-rating="5" class="md-primary" :md-empty-icon="'star_border'"></md-rating-bar>
  能力 <md-rating-bar v-model="rating7" :md-max-rating="5" class="md-primary" :md-empty-icon="'star_border'"></md-rating-bar>
  职业 <md-rating-bar v-model="rating8" :md-max-rating="5" class="md-primary" :md-empty-icon="'star_border'"></md-rating-bar>
  </div>
</div>

</template>

<style>
  #id_send{/*旋转30度 */
    transform:rotate(-30deg);
    -ms-transform:rotate(-30deg); 	/* IE 9 */
    -moz-transform:rotate(-30deg); 	/* Firefox */
    -webkit-transform:rotate(-30deg); /* Safari 和 Chrome */
    -o-transform:rotate(-30deg); 	/* Opera */
  }
  .mu-card-header{
    text-align:left;
  }
  .md-rating-bar{
  margin-top:0.2rem;
  margin-left:0.5rem;
  }
	#id_comment{
			margin:0.5rem;
			text-align:left;
	}
</style>

<script>
import iconAvatar from '@/assets/img/uicon.jpg';
import { Toast } from 'mint-ui';

export default {
  data() {
    return {
      IconAvatar: iconAvatar,
      comment: null,
      rating6: 1,
      rating7: 1,
      rating8: 1,
    };
  },
  methods: {
    handleBack() {
      this.$router.back();
    },
    handleSend() {
      const params = {
        feed: this.comment,
        name: this.$route.query.name,
        mobile: this.$route.query.mobile,
      };
      this.$store.dispatch('comment', params);
    },
  },
  computed: {
    getComment() {
      return this.$store.getters.getComment;
    },
  },
  watch: {
    getComment: function comment(newComment) {
      if (newComment) {
        Toast('评价成功');
        this.$router.back();
      }
    },
  },
};
</script>
